<template>
  <footer>
    <div class="footer-main">
      <div class="footer-logo">
        <img class="logo02" src="@/assets/img/logo02.png" alt="">
        <img class="factory" src="@/assets/img/foot-factory.png" alt="">
      </div>
      <div class="footer-content">
        <ul>
          <li>关于我们</li>
          <li>｜</li>
          <li>联系我们</li>
          <li>｜</li>
          <li>意见反馈</li>
          <li>｜</li>
          <li>版权声明</li>
        </ul>
        <div>
          Copyrignt© 2021 imooc.com 京ICP备 12003892号-11 京公网安备11010802030151号 营业执照
        </div>
      </div>
      <div class="wx">
        <ul>
          <li>
            <img src="@/assets/img/guanfangwx.jpg" alt="">
            <span>官方微信</span>
          </li>
          <li>
            <img src="@/assets/img/guanfangwx.jpg" alt="">
            <span>指导老师微信</span>
          </li>
        </ul>
      </div>
    </div>
  </footer>
</template>

<script setup>

</script>

<style lang="scss" scoped>
footer {
  width: 100%;
  height: 187px;
  background: #3483FF;


  .footer-main {
    width: 1000px;
    height: 100%;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .footer-logo {
    display: flex;
    align-items: center;

    .logo02 {
      width: 127px;
      height: 50px;
    }

    .factory {
      width: 130px;
      height: 110px;
    }
  }

  .footer-content {
    color: white;
    font-size: 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0 25px;

    ul {
      display: flex;
    }
  }

  .wx {
    ul {
      display: flex;
      color: #fff;
      font-size: 12px;

      li {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;

        &+li {
          margin-left: 10px;
        }

        img {
          width: 70px;
          height: 70px;
        }

        span {
          margin-top: 10px;
        }
      }
    }

  }
}
</style>